<template>
  <div>
    <h2>{{$route.params.filmId}}</h2>
    <h3>{{info.name}}</h3>
    <img height="200" :src="info.poster" alt="">
    <p>{{info.synopsis}}</p>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Details",
  data () {
    return {
      info: {}
    }
  },
  methods: {
    getFilmInfo (filmId) {
      axios.get("https://m.maizuo.com/gateway", {
        params: {
          filmId
        },
        headers: {
          "X-Client-Info": '{"a":"3000","ch":"1002","v":"5.2.1","e":"17026209561814756826546177"}',
          "X-Host": "mall.film-ticket.film.info"
        }
      }).then(value => {
        this.info = value.data.data.film;
        console.log("film", value.data.data.film);
      })
    }
  },
  beforeRouteUpdate (to, from, next) {
    this.getFilmInfo(to.params.filmId);
    next();
  },
  mounted () {
    const { filmId } = this.$route.params;
    this.getFilmInfo(filmId);
  }
}
</script>

<style scoped>
</style>